<template>
	<view class="result">
		<view class="flex-center">
			<image class="icon-result" :src="$util.img(show_img)" mode="aspectFit" />
			<view class="result-text">{{result_text}}</view>
		</view>
		
		<block  v-if="order_info.pay_time > 0">
			<view class="store-name">感谢您光临{{order_info.store_name}}，欢迎下次光临</view>
		</block>
		<block v-else>
			<view class="store-name">很抱歉！本次订单支付，请重试</view>			
		</block>
		
		<view class="result_info">
			<view class="money"><text>&yen;</text>{{order_info.money}}</view>
			<view class="pay_info first">
				<text>付款商家</text>
				<text class="bold">{{order_info.store_name}}</text>
			</view>
			<block  v-if="order_info.pay_time > 0">
				<view class="pay_info">
					<text>支付时间</text>
					<text class="bold">{{ $util.timeStampTurnTime(order_info.pay_time) }}</text>
				</view>
			</block>
			<view class="pay_info last">
				<text>预计赠送</text>
				<text class="bold">{{order_info.point}} 积分</text>
				<text class="tips">赠送积分以实际到账为准</text>
			</view>
			

			<block  v-if="order_info.pay_time > 0">
			<view class="bind-info">
				<view class="button" @click="toWeapp">查看订单</view>
				<view class="button last" @click="toWeapp">立即领取积分</view>
			</view>
			</block>
			<block v-else>
				<view class="bind-info">
					
					<view class="button" @click="toBack">返回商家支付页</view>
				</view>				
			</block>
			
			<loading-cover ref="loadingCover"></loading-cover>

			<bind-mobile ref="bindMobile"></bind-mobile>
		</view>
	</view>
</template>

<script>
	import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
	export default {
		components: {
			bindMobile
		},
		data() {
			return {
				pay_no: '',
				collection_no: '',
				order_info: {},
				result_text:'支付失败',
				show_img: '/upload/uniapp/pay_fail.png',
				error_img: '/upload/uniapp/pay_error.png',
				token: '',
				openlink: '',
				urllink:'',
				
			}
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			}
		},
		watch: {
			storeToken: function(nVal, oVal) {
				this.token = uni.getStorageSync('token');
			}
		},
		methods: {
			toWeapp() {
				// 可选：添加跳转前的逻辑（如判断环境）
				const isWechat = /MicroMessenger/i.test(navigator.userAgent);
				if (!isWechat) {
					//e.preventDefault(); // 阻止默认跳转
					alert('请在微信中打开');
					return false;
				}
				if (/android/i.test(navigator.userAgent)) {
				       location.href=this.openlink;
				    }
					else{
					 const jumpData = {
					   action: 'jumpOut',
					   jumpOutUrl: this.urllink //跳转的页面
					 };
					  window.parent.postMessage(JSON.stringify(jumpData), '*');
				}
			},
			toRegister() {
				let authInfo = uni.getStorageSync('authInfo');
				if (!authInfo) authInfo = uni.getStorageSync('payAuthInfo'); 
				if (authInfo) {
					uni.setStorageSync('authInfo', authInfo);
					this.$refs.bindMobile.open();
				} else {
					this.$util.redirectTo('/otherpages/login/register/register');
				}
			},
			toBack() {
				this.$util.redirectTo('/plugpages/collection/index', { site_id: this.order_info.site_id }, 'redirectTo');
			},
			
			// 获取小程序链接
			getScheme(){
				this.$api.sendRequest({
					url: '/weapp/api/weapp/getScheme',
					data: {
						collection_no: this.collection_no,
					},
					success: res => {
						this.openlink = res.openlink		
						
					
					}
				})
				
			},
			getUrlLink(){
				this.$api.sendRequest({
					url: '/weapp/api/weapp/getUrlLink',
					data: {
						collection_no: this.collection_no,
					},
					success: res => {
						this.urllink = res.url_link		
						
					
					}
				})
				
			},
			getOrderInfo(){
				this.$api.sendRequest({
					url: '/collection/api/collection/getOrderInfo',
					data: {
						collection_no: this.collection_no,
						pay_no: this.pay_no
					},
					success: res => {
						if (res.code == 0) {
							this.order_info = res.data;	
							this.collection_no=res.data.collection_no;
							if (res.data.state == 1) {
								this.result_text = '支付成功';
								this.show_img = '/upload/uniapp/pay_success.png';
								this.SendVoice();
								this.getScheme();
								this.getUrlLink();
							}
						}	
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			SendVoice(){
				this.$api.sendRequest({
					url: '/thirdapi/VoiceSend/SendVoice',
					data: {
						pay_money: this.order_info.money,
						pay_type: this.order_info.type
					},
					success: res => {
						if (res.code == 0) {
							console.log(resmessage);
						}	
						
					},
					fail: res => {
						
					}
				});
				
			},
			// 初始化点金计划JSAPI
			initGoldPlanJSAPI() {
			  // 必须在3秒内调用onIframeReady
			  setTimeout(() => {
				const data = {
				  action: 'onIframeReady',
				  displayStyle: 'SHOW_CUSTOM_PAGE',
				  height: 900 // 初始高度，后续会动态调整
				};
				
				// 使用UniApp的postMessage或直接调用
				if (typeof uni !== 'undefined' && uni.postMessage) {
				  uni.postMessage({
					data: JSON.stringify(data)
				  });
				} else {
				  window.parent.postMessage(JSON.stringify(data), '*');
				}
				console.log('点金计划JSAPI初始化完成', data);
			  }, 500); // 500ms内确保调用
			}
		},
		onLoad(options) {
			this.pay_no = options.out_trade_no || '';
			this.collection_no = options.code || '';
			uni.setStorageSync('collection_no', this.collection_no);
			if (this.pay_no) {
				this.initGoldPlanJSAPI();
			}
			this.getOrderInfo();
			//this.getScheme();
		},
		onShow() {
			this.token = uni.getStorageSync('token');
		}
	}
</script>

<style lang="scss" scoped>
	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;

		.icon-result {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.result-text {
			font-size: 36rpx;
			color: #303133;
			font-weight: 700;
		}
	}
	.result {
		.result_info {
			margin-top: 30rpx;
			padding: 40rpx;
			.money {
				font-size: 60rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #000000;
				text-align: center;
				background-color: #FFFFFF;
				line-height: 140rpx;
				border-radius: 20rpx 20rpx 0 0;
				border-bottom: 1rpx dashed #EEEEEE;
				position: relative;
				text {
					font-size: 36rpx;
					margin-right: 20rpx;
				}
			}
			.money:after {
				content: '';
				width: 40rpx;
				height: 40rpx;
				border-radius: 40rpx;
				display: block;
				position: absolute;
				background-color: #f8f8f8;
				left: -20rpx;
				bottom: -20rpx;
			}
			.money:before {
				content: '';
				width: 40rpx;
				height: 40rpx;
				border-radius: 40rpx;
				display: block;
				position: absolute;
				background-color: #f8f8f8;
				right: -20rpx;
				bottom: -20rpx;				
			}
			.pay_info {
				background-color: #FFFFFF;
				padding: 0 40rpx;
				line-height: 70rpx;
				color: #888888;
				font-size: 32rpx;
				.bold {
					margin-left: 30rpx;
					color: #222;
				}
				.tips {
					display: block;
					font-size: 28rpx;
					margin-left: 5rem;
					margin-top: -26rpx;
				}
			}
			.first {
				padding-top: 30rpx;
			}
			.pay_info.last {
				padding-bottom: 30rpx;
				border-radius: 0 0 20rpx 20rpx;
			}
			
		}
	}

	.store-name {
		margin-top: 8rpx;
		font-size: 28rpx;
		color: #6d6f74;
		line-height: 46rpx;
		text-align: center;
	}

	.bind-info {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		.bind-text {
			width: 100%;
			text-align: center;
		}
		.bind-point {
			color: #FF4544;
		}
		.button {
			height: 80rpx;
			border-radius: 42rpx;
			border: 1rpx solid #e5e5e5;
			font-size: 32rpx;
			color: #333;
			line-height: 80rpx;
			padding: 0 40rpx;
			margin: 0 20rpx;
			background-color: #fefefe;
		}
		.button.last {
			background: repeating-linear-gradient(45deg,  #52a8fd,  #00c8d6);
			border-color: #52a8fd;
			color: #FFFFFF;
		}
	}
	
</style>